<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			[v-cloak] {
				display: none;
			}
		</style>
	</head>
	<body>
	    <!--解决表达式闪烁的问题-->
  		<div id="app">
			<p v-cloak> ===== {{ msg }}</p>

			<!--v_text 会覆盖元素中的内容 -->
			<p v-text="msg">=====</p>

			<div v-html="msg2">123123</div>

			<input id="btn" type="button" value="按钮" v-bind:title="mytitile" @click="ale">
			<!--<input type="button" value="按钮" :title="mytitile">-->
			<input id="btn2" type="button" value="按钮" v-bind:title="mytitile" @mouseover="ale">



		</div>

		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>

		<script>
			new Vue({
				el:'#app',				
 				data:{
					msg:'信息',
					msg2:'<h1>这是一个表达式</h1>',
					mytitile:'只是一个自己定义的标题'
				},
				methods:{
//				    ale:function () {
//
//                    }

				    ale() {
				        alert('hello')
					}
				}
			})

//			document.getElementById('btn').onclick =function () {
//			    alert('hello')
//			}
		</script>
	</body>
</html>
